<template>
  <div>
    <router-link to="/home" active-class="active" exact-active-class="exavt"
      >主页</router-link
    >
    <router-link to="/fenlei" active-class="active" exact-active-class="exavt"
      >分类</router-link
    >
    <router-link to="/dingdan" active-class="active" exact-active-class="exavt"
      >订单</router-link
    >
    <router-link to="/my" active-class="active" exact-active-class="exavt"
      >我的</router-link
    >
    <h1>显示路由切换的页面</h1>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
a {
  margin-left: 10px;
  color: black;
}
.avtive {
  color: red;
}
.exavt {
  color: red;
}
</style>